<template>
	<view style="margin-right: 10rpx; margin-left: 20rpx; height: 446rpx">
		<swiper :current="swiperIndex" style="height: 100%" @change="swiperChange" :indicator-dots="true">
			<swiper-item v-for="(items, index) in emojData" :key="index">
				<view class="emoj-container">
					<view class="emoj-row">
						<view class="emoj-parent" v-for="(item, i) in items" :key="i" hover-class="checkActive"
							hover-stay-time="100" @click="tuchEmoj(item)">
							<up-image :src="item" width="60px" height="60px"></up-image>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
import { ref } from "vue";
import { iconUrl } from "../utils/common";
const emit = defineEmits(["swiperChange"]);
const emojData = ref([iconUrl]);
const swiperIndex = ref(0);
const selectedEmoji = ref(null);
const tuchEmoj = (item) => {
	selectedEmoji.value = item;
	emit("swiperChange", item);
};
const swiperChange = (e) => {
	swiperIndex.value = e.detail.current;
};
</script>

<style>
.emoj-container {
	display: flex;
	flex-direction: column;
}

.emoj-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.emoj-parent {
	margin-left: 8rpx;
	margin-bottom: 5rpx;
	align-items: center;
	margin-top: 8rpx;
	padding-top: 5rpx;
	padding-bottom: 5rpx;
}

.checkActive {
	background-color: #e8e8e8 !important;
}

.emoj-conn {
	width: 80rpx;
	font-size: 56rpx;
	text-align: center;
}
</style>
